<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="format-detection" content="telephone=notelphone=no, email=no">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">

    <title>拖动效果</title>
    <meta name="keywords" content="拖动效果">
    <meta name="description" content="拖动效果">
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-touch-fullscreen" content="yes">
    <!-- 设置苹果工具栏颜色:默认值为 default，可以定为 black和 black-translucent-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <!-- 来源地址: https://jingyan.baidu.com/article/29697b91632e7dab20de3c3d.html -->
    <style type="text/css">
        .move {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #ccc;
            position: absolute;
            top: 200px;
            left: 200px;
        }
        .move-header {
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #beceeb;
            cursor: move;
        }
    </style>

    <div id="move" class="move">
        <div id="move-header" class="move-header">拖拽</div>
        <div class="move-body">
            <br/>
            内容......
        </div>
    </div>

    <script type="text/javascript">
        function get(id) {
            return document.getElementById(id);
        }
        var mouseOffsetX = 0,
            mouseOffsetY = 0,
            isDrageing = false;

        get('move-header').addEventListener('mousedown', function(e) {
            var e = e || window.event;
            mouseOffsetX = e.pageX - get('move').offsetLeft;
            mouseOffsetY = e.pageY - get('move').offsetTop;
            isDrageing = true;
        });

        document.onmousemove = function(e) {
            var e = e || window.event,
                moveX = 0,
                moveY = 0;

            if (isDrageing === true) {
                moveX = e.pageX - mouseOffsetX;
                moveY = e.pageY - mouseOffsetY;
                get('move').style.left = moveX + 'px';
                get('move').style.top = moveY + 'px';
            }
        };

        document.onmouseup = function() {
            // 鼠标松开标记元素为不可拖动状态
            isDrageing = false;
        }
    </script>
</body>
</html>
